// flip动画
function flipAni(selector) {
    const els = document.querySelectorAll(selector);
    let records = [...els].map(el => ({ el, rect: el.getBoundingClientRect() }));
    let curRecords = [];
    return {
        play(callback, options) {
            if(typeof callback !== 'function') { return }
            curRecords = [...els].map(el => ({ el, rect: el.getBoundingClientRect() }));
            const animations = [];
            [...els].forEach((el, i)=> {
                const invertBefore = records[i].rect;
                const invertAfter = curRecords[i].rect;
                const frames = callback(invertBefore, invertAfter);
                // 返回一个Animation对象
                const animation = el.animate(frames, Object.assign({
                    duration: 500,
                    fill: 'both',
                    easing: 'ease-in-out'
                },options))
                animations.push(animation);
            });
            // 动画结束后，一定要重新更新records
            animations.forEach(async (animation, i) => {
                await animation.finished;
                records[i].rect = records[i].el.getBoundingClientRect();
                if(i == animations.length - 1) {
                    records = curRecords;
                }
            });
            return animations;
        }
    }
}